<template>
	<view>
		<!-- 上方内容组件 -->
		<blog-info-header :blog-info="blogInfo"></blog-info-header>
		<!-- 横线组件 -->
		<blog-line></blog-line>
		<!-- 博客内容 -->
		<view class="blog-content"><rich-text :nodes="blogInfo.blogContent"></rich-text></view>
		<blog-line></blog-line>
		<!-- 评论组件 -->
		<blog-comment :comment-list="commentList"></blog-comment>
		<blog-line></blog-line>
		<!-- 相关阅读 -->
		<view class="recom-blog-container">
			<view class="recom-blog-title">相关阅读</view>
			<blog-list :blog-list="blogList"></blog-list>
		</view>
		<!-- 用户评论组件 -->
		<view class="blog-handle-container">
			<view class="comment-input-container" @click="openCommentInput">
				<image class="comment-image" src="/static/icons/xiewenzang.png"></image>
				<input class="comment-input" type="text" @click="openCommentInput" placeholder="写评论..." disabled="disabled" />
			</view>
			<view class="blog-handle-meta">
				<view class="blog-handle-meta-item" v-if="!gooded" @click="good"><image class="blog-handle-meta-image" src="/static/icons/dianzan.png"></image></view>
				<view class="blog-handle-meta-item" v-if="gooded" @click="good"><image class="blog-handle-meta-image" src="/static/icons/dianzan_red.png"></image></view>
				<button class="blog-handle-meta-item-button" open-type="share"><image class="blog-handle-meta-image" src="/static/icons/fenxiang.png"></image></button>
				<view class="blog-handle-meta-item" v-if="!collectioned" @click="collection"><image class="blog-handle-meta-image" src="/static/icons/shoucang.png"></image></view>
				<view class="blog-handle-meta-item" v-if="collectioned" @click="collection">
					<image class="blog-handle-meta-image" src="/static/icons/shoucang_red.png"></image>
				</view>
			</view>
		</view>
		<!-- 评论弹出层 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-textarea">
				<textarea class="comment-textarea" v-model="commentContent" maxlength="300" placeholder="请输入评论内容,限制300个字符"></textarea>
				<button class="poput-button" @click="saveComment" type="primary">发布</button>
			</view>
		</uni-popup>
		<!-- 版权组件 -->
		<copyright></copyright>
	</view>
</template>

<script>
import blogApi from '@/api/blog.js';
import commentApi from '@/api/comment.js';
import userApi from '@/api/myUser.js';
export default {
	data() {
		return {
			blogId: '', // 博客id
			blogInfo: {}, // 博客信息对象
			commentList: [], // 评论列表
			blogList: [], // 博客列表
			gooded: false, // 判断是否点赞，默认否
			collectioned: false, // 判断是否收藏，默认否
			commentContent: '' // 评论内容
		};
	},
	onLoad(e) {
		this.blogId = e.id;
		this.getGood();
		this.getCollection();
		this.getBlogById();
		this.getCommenList();
		this.getBlogList();
	},
	methods: {
		// 根据博客id查询
		getBlogById() {
			blogApi.read(this.blogId).then(res => {
				this.blogInfo = res.data;
			});
		},
		// 获取评论列表,根据博客id查询
		getCommenList() {
			commentApi.getCommentByBlog(this.blogId).then(res => {
				this.commentList = res.data;
			});
		},
		// 获取博客列表
		getBlogList() {
			const page = {
				current: 1,
				pageSize: 10,
				sortColumn: 'created_time',
				sortMethod: 'desc'
			};
			blogApi.getByPage(page).then(res => {
				this.blogList = res.data.list;
			});
		},
		// 判断是否点赞
		getGood() {
			// 查询当前点赞记录
			blogApi.getGood(this.blogId).then(res => {
				// 判断如果数据大于0，表示已点赞
				if (res.data > 0) {
					this.gooded = true;
				}
			});
		},
		// 判断是否收藏
		getCollection() {
			// 查询当前收藏记录
			blogApi.getCollection(this.blogId).then(res => {
				// 判断如果数据大于0，表示已点赞
				if (res.data > 0) {
					this.collectioned = true;
				}
			});
		},
		// 打开评论弹窗
		openCommentInput() {
			var validate = '';
			userApi.validateUser().then(res => {
				validate = res.data.validateLogin;
				if (validate === '1') {
					this.$refs.popup.open();
				} else {
					uni.showToast({
						title: '当前未登录，请先登录！',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/mine/mine'
					});
				}
			});
		},
		// 点赞
		good() {
			var validate = '';
			userApi.validateUser().then(res => {
				validate = res.data.validateLogin;
				if (validate === '1') {
					if (this.gooded) {
						console.log('-1');
						// 已点赞，就取消点赞
						blogApi.goodsDelete(this.blogId).then(res => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							uni.navigateTo({
								url: '/pages/blog-info/blog-info?id='+this.blogId
							});
						});
					} else {
						console.log('+1');
						// 未点赞，就点赞
						blogApi.goodsAdd(this.blogId).then(res => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							uni.navigateTo({
								url: '/pages/blog-info/blog-info?id='+this.blogId
							});
						});
					}
				} else {
					uni.showToast({
						title: '当前未登录，请先登录！',
						icon: 'none'
					});
					uni.reLaunch({
						url: '/pages/mine/mine'
					});
				}
			});
		},
		// 取消点赞
		gooded() {},
		// 收藏
		collection() {
			var validate = '';
			userApi.validateUser().then(res => {
				validate = res.data.validateLogin;
				if (validate === '1') {
					if (this.collectioned) {
						console.log('-1');
						// 已点赞，就取消点赞
						blogApi.collectionDelete(this.blogId).then(res => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							uni.navigateTo({
								url: '/pages/blog-info/blog-info?id='+this.blogId
							});
						});
					} else {
						console.log('+1');
						// 未点赞，就点赞
						blogApi.collectionAdd(this.blogId).then(res => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							uni.navigateTo({
								url: '/pages/blog-info/blog-info?id='+this.blogId
							});
						});
					}
				} else {
					uni.showToast({
						title: '当前未登录，请先登录！',
						icon: 'none'
					});
					uni.reLaunch({
						url: '/pages/mine/mine'
					});
				}
			});
		},
		// 取消收藏
		collectioned() {},
		// 添加评论
		saveComment() {
			const comment = {
				commentContent: this.commentContent,
				commentBlog: this.blogId
			};
			commentApi.save(comment).then(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				this.$refs.popup.close();
				this.commentContent = '';
				// 刷新评论
				this.getCommenList();
			});
		}
	}
};
</script>

<style>
@import url('./index.css');
</style>
